<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"/>
</template>
<script setup name="saleByDay">
import {saleBySalesman} from '@/api/system/report.js'

const {proxy} = getCurrentInstance();

function getData() {
  /*if (!props.queryParams.time) {
    return
  }*/
  saleBySalesman({
    'startTime': proxy.parseTime(props.queryParams.time[0], "{y}-{m}-{d}"),
    'endTime': proxy.parseTime(props.queryParams.time[1], "{y}-{m}-{d}")
  }).then(response => {
    let countType = props.queryParams.countType
    let price = [0, 0, 0, 0, 0, 0]
    let createby = []
    if (response.data) {
      createby = response.data.map(item => item.create_by)
      price = response.data.map(item => countType == '销售额'?item.price:item.count)
    }
    option.value = {
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        type: 'category',
        data: createby
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: countType,
          data: price,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    };
    myChart.value.setOption(option.value, true);
  });
}


//
import {ref, onMounted, watch, markRaw} from "vue";
import * as echarts from "echarts";

const option = ref(null);

const chartDom = ref(null);
const myChart = ref(null);
const props = defineProps({
  queryParams: {
    time: [],
    itemType: null,
  },
  style: {
    type: Object,
    default: () => ({
      width: "90%",
      height: "400px",
    }),
  },
});
const resizeHandler = () => {
  myChart.value.resize();
};
onMounted(() => {
  getData()
  myChart.value = markRaw(echarts.init(chartDom.value));

  window.addEventListener("resize", resizeHandler);
});
watch(
    () => props.queryParams,
    (newOptions) => {
      getData()
    },
    {
      deep: true,
    }
);

defineExpose({
  resizeHandler,
});
</script>